<template>
  <transition name="fullScreen">
  <div ref="slider" class="slider" :class="[{'slider-menu-nav': isMenuNav,'slider-full': isFullScreen }]">
    <transition name="fade">
      <el-card v-show="isToggle" class="slider-menu transition-box" :style="[{width: sliderWidth}]"
           :class="[{'slider-menu-close': !isToggle, 'slider-menu-open': isToggle}]">
        <template slot="header" v-if="header">
          <template v-if="sliderHeaderSlot">
            <slot name="header"></slot>
          </template>
          <div v-else class="clearfix">
            <span>{{title || ""}}</span>
          </div>
        </template>
        <template v-if="sliderListSlot">
          <slot name="slider"></slot>
        </template>
        <template v-else>
          <slider-item :sliderType="sliderType"
                       :data="data"
                       :props="props"
                       :defaultValue="defaultValue"
                       @change="sliderChange"></slider-item>
        </template>
      </el-card>
    </transition>
    <div ref="toggle" class="slider-toggle" :style="[{left: toggleTrans,}]"
         @click="toggle"><i :class="isToggle ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
      {{isToggle ? '隐藏':'显示'}}
    </div>
    <el-card ref="content" class="slider-content"
         :style="[{width: sliderContentWidth}]">
      <!--<div style="width: 100%; height: 100%">-->
        <slot name="content">1</slot>
      <!--</div>-->
    </el-card>
  </div>
  </transition>
</template>

<script>
  import SliderItem from "./slider_item.vue";
  export default {
    name: "Slider",
    components: {SliderItem},
    props: {
      // slider得宽度
      sliderWidth: {
        type: String,
        default: "100px"
      },
      minWidth: {
        type: Number,
        default: 100
      },
      // 是否默认展开
      defaultOpen: {
        type: Boolean,
        default: true,
      },
      // 显示头部
      header: {
        type: Boolean,
        default: false
      },
      // 自定义头部
      sliderHeaderSlot: {
        type: Boolean,
        default: false
      },
      // 自定义列表项
      sliderListSlot: {
        type: Boolean,
        default: false
      },
      // 标题
      title: String,
      // 数据
      data: {
        type: Array,
        default: () => [],
      },
      // 默认选择值
      defaultValue: {
        type: [Array, Object],
        default: () => [],
      },
      // slider类型
      sliderType: {
        type: String,
        default: "list", // collapse, tree
      },
      // 键值对
      props: {
        type: Object,
        default: () => {
          return {label: "label", key: "key", children: "children"}
        }
      },
      isMenuNav: {
          type: Boolean,
          default: false
      }
    },
    emits: ["change"],
    data() {
      return {
        isToggle: true,
        isFullScreen: false,
      }
    },
    watch: {
      defaultOpen(val) {
        this.isToggle = val;
      }
    },
    computed: {
      toggleTrans() {
        if (this.sliderWidth.indexOf("px") >= 0) {
          const sliderWidth = parseInt(this.sliderWidth.replace("px", ""));
          return this.isToggle ? (sliderWidth) + "px" : "0px";
        } else {
          // 百分比
          return this.isToggle ? this.sliderWidth : "0%";
        }
      },
      sliderContentWidth() {
        const marginLeft = 30;
        if (this.$refs.content) {
          let sliderMenuWidth = 0;
          let sliderWidth = this.$refs.slider.offsetWidth;
          let w = 0;
          if (this.sliderWidth.indexOf("px") >= 0) {
            w = sliderWidth * parseInt(this.sliderWidth.replace("px", ""));
          } else {
            w = sliderWidth * parseInt(this.sliderWidth.replace("%", "")) / 100;
          }
          if (w < this.minWidth) w = this.minWidth;
          sliderMenuWidth =  w - 20;
          return (this.isToggle ? sliderWidth - sliderMenuWidth - marginLeft - 20 : sliderWidth - marginLeft) + "px";
        } else {
          return `calc(100% - ${this.isToggle ? this.sliderWidth : 0} - ${marginLeft}px)`;
        }
      }
    },
    created() {
      this.$emitter.on("fullScreen", (val)=> {
        this.isFullScreen = val;
        this.$nextTick(()=> {
            this.isToggle = !this.isToggle;
        });
      });
      const that = this;
      // window.addEventListener("resize", function () {
      //   that.$forceUpdate();
      // })
    },
    mounted() {
      this.isToggle = this.defaultOpen;

    },
    methods: {
      toggle() {
        this.isToggle = !this.isToggle;
      },
      sliderChange(val) {
        this.$emit("change", val);
      }
    }
  }
</script>

<style scoped lang="scss">
  $slider-width: 0px;
  $toggle-width: 20px;
  .slider {
    display: flex;
    /*height: calc(100vh - 220px);*/
    height: 100%;
    position: relative;
    &-menu-nav {
      /*height: calc(100vh - 170px);*/
      height: 100%;
    }

    &-full {
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      position: fixed;
      background: white;
      z-index: 5000;
    }
    &-menu {
      height: calc(100% - 2px);
      transition: transform 1s;
      position: absolute;
      left: 0px;
      :deep(.el-card__body) {
        height: calc(100% - 65px) !important;
        padding-bottom: 20px;
      }
    }
    &-toggle {
      background: rgba(225, 225, 225, 1);
      /*background: #1e9fff;*/
      height: 100px;
      width: $toggle-width;
      transform: translateY(-50%);
      top: 50%;
      position: absolute;
      left: $slider-width;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .1);
      /*box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .1);*/
      font-size: 12px;
      color: #333;
      /*color: white;*/
      cursor: pointer;
      transition: all 1s;
      &:hover {
        background: rgba(225, 225, 225, .7);
        /*background: rgba(30, 159, 255, .7);*/
      }
    }
    &-content {
      position: absolute;
      height: calc(100% - 2px);
      right: 0;
      transition: all 1s;
      :deep(.el-card__body) {
        height: calc(100% - 20px) !important;
        padding-bottom: 20px;
      }
    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: all 1s;
    transform: translateX(0);
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateX(-100%);
  }

</style>
